<template>
    <van-nav-bar title="我的资料" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="myinformation">
        <div class="myinformation_from">
            <van-cell-group>
                <van-cell title="账号" :value="token.Phone" />
                <van-cell title="昵称" is-link :value="token.NickName" @click="dialogShow0 = true" />
                <van-cell title="手机号" :value="token.Phone" />
                <van-cell title="开户姓名" is-link :value="token.OBackUserName" @click="dialogShow5 = true" />
                <van-cell title="银行账号" is-link :value="token.OAccount" @click="dialogShow2 = true" />
                <van-cell title="银行名称" is-link :value="token.OBackName" @click="dialogShow1 = true" />
                <van-cell title="银行支行名称" value-class="van_cell_left" is-link :value="token.OpeningBranch"
                    @click="dialogShow = true" />
                <van-cell title="邀请码" :value="token.InviteCodeCode" />
                <van-cell title="修改登录密码" is-link value="***" @click="dialogShow3 = true" />
                <van-cell title="修改交易密码" is-link value="***" @click="dialogShow4 = true" />
            </van-cell-group>
        </div>
        <div class="form_btn">
            <van-button block type="primary" class="btn1" @click="FedLogOut"> 退出登录 </van-button>
            <br />
            <van-button block type="danger" plain class="" @click="callAndroid()"> 清除缓存 </van-button>
        </div>
        <van-dialog v-model:show="dialogShow0" title="修改昵称" show-cancel-button v-model:before-close="onBeforeCloseNickName">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="NickName" name="昵称" label="" placeholder="请输入新的昵称" />
            </div>
        </van-dialog>


        <van-dialog v-model:show="dialogShow5" title="修改开户姓名" show-cancel-button
            v-model:before-close="onBeforeCloseOBackUserName">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OBackUserName" name="开户姓名" label="" placeholder="请输入新的开户姓名" />
            </div>
        </van-dialog>
        <van-dialog v-model:show="dialogShow2" title="修改银行账号" show-cancel-button
            v-model:before-close="onBeforeCloseOAccount">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OAccount" name="银行账号" label="" placeholder="请输入新的银行账号" />
            </div>
        </van-dialog>
        <van-dialog v-model:show="dialogShow1" title="修改银行名称" show-cancel-button
            v-model:before-close="onBeforeCloseOBackName">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OBackName" name="银行名称" label="" placeholder="请输入新的银行名称" />
            </div>
        </van-dialog>
        <van-dialog v-model:show="dialogShow" title="修改银行支行名称" show-cancel-button
            v-model:before-close="onBeforeCloseOpeningBranch">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OpeningBranch" name="银行支行名称" label="" placeholder="请输入新的银行支行名称" />
            </div>
        </van-dialog>




        <van-dialog v-model:show="dialogShow3" title="修改登录密码" show-cancel-button
            v-model:before-close="onBeforeClosePassword">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OldPassword" type="password" name="修改登录密码" label="" placeholder="请输入旧的登录密码" />
            </div>
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="NewPassword" type="password" name="修改登录密码" label="" placeholder="请输入新的登录密码" />
            </div>
        </van-dialog>
        <van-dialog v-model:show="dialogShow4" title="修改交易密码" show-cancel-button
            v-model:before-close="onBeforeCloseSecurity">
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="OldPwd" type="password" name="交易密码" label="" placeholder="请输入旧的交易密码" />
            </div>
            <div class="myinformation_dialog_form">
                <van-field autosize v-model="NewPwd" type="password" name="交易密码" label="" placeholder="请输入新的交易密码" />
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { Dialog } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { isPhone, isCardID } from "@/utils/validate";
import { UpdateLoginPwd, UpdateSecurityPwd } from "@/network/user";
import router from "@/router";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            token: store.state.user.token,
            dialogShow0: false,
            dialogShow: false,
            dialogShow1: false,
            dialogShow2: false,
            dialogShow3: false,
            dialogShow4: false,
            dialogShow5: false,

            NickName: '',
            CardID: '',
            Name: '',
            AliPayAccount1: '',

            OBackUserName: '',//开户姓名
            OAccount: '',//银行账号
            OBackName: '',//银行名称
            OpeningBranch: '',//银行支行名称

            //修改登录密码
            OldPassword: '',
            NewPassword: '',
            //修改交易密码
            OldPwd: '',
            NewPwd: '',

        });
        onMounted(() => {
            getUser();
        });
        const onBeforeCloseNickName = (action, done) => {
            if (action === "confirm") {
                if (state.NickName == '') {
                    Notify({ type: 'warning', message: '请输入新的交易真实姓名' });
                    return false
                }
                state.token.NickName = state.NickName;
                UpdateUser();
            } else {
                state.dialogShow0 = false
            }
        }
        const onBeforeCloseCardID = (action, done) => {
            if (action === "confirm") {
                if (state.CardID == '') {
                    Notify({ type: 'warning', message: '请输入新的身份证号码' });
                    return false
                }
                if (!isCardID(state.CardID)) {
                    state.CardID = '';
                    Notify({ type: 'warning', message: '身份证号码不正确，请重新输入' });
                    return false
                }
                state.token.CardID = state.CardID;
                UpdateUser();
            } else {
                state.dialogShow = false
            }
        }
        const onBeforeCloseName = (action, done) => {
            if (action === "confirm") {
                if (state.Name == '') {
                    Notify({ type: 'warning', message: '请输入新的交易真实姓名' });
                    return false
                }
                state.token.Name = state.Name;
                UpdateUser();
            } else {
                state.dialogShow1 = false
            }
        }
        const onBeforeCloseAliPayAccount1 = (action, done) => {
            if (action === "confirm") {
                if (state.AliPayAccount1 == '') {
                    Notify({ type: 'warning', message: '请输入新的交易支付宝账号' });
                    return false
                }
                state.token.AliPayAccount1 = state.AliPayAccount1;
                UpdateUser();
            } else {
                state.dialogShow2 = false
            }
        }
        const onBeforeClosePassword = (action, done) => {
            if (action === "confirm") {
                if (state.OldPassword == '') {
                    Notify({ type: 'warning', message: '请输入旧的登录密码' });
                    return false
                }
                if (state.NewPassword == '') {
                    Notify({ type: 'warning', message: '请输入新的登录密码' });
                    return false
                }
                UpdateUserPassword();
            } else {
                state.OldPassword = '';
                state.NewPassword = '';
                state.dialogShow3 = false
            }
        }
        const onBeforeCloseSecurity = (action, done) => {
            if (action === "confirm") {
                if (state.OldPwd == '') {
                    Notify({ type: 'warning', message: '请输入旧的交易密码' });
                    return false
                }
                if (state.NewPwd == '') {
                    Notify({ type: 'warning', message: '请输入新的交易密码' });
                    return false
                }
                UpdateSecurityPassword();
            } else {
                state.OldPwd = '';
                state.NewPwd = '';
                state.dialogShow4 = false
            }
        }
        //修改开户姓名
        const onBeforeCloseOBackUserName = (action, done) => {
            if (action === "confirm") {
                if (state.OBackUserName == '') {
                    Notify({ type: 'warning', message: '请输入新的修改开户姓名' });
                    return false
                }
                state.token.OBackUserName = state.OBackUserName;
                UpdateUser();
            } else {
                state.dialogShow5 = false
            }
        }
        //修改银行账号
        const onBeforeCloseOAccount = (action, done) => {
            if (action === "confirm") {
                if (state.OAccount == '') {
                    Notify({ type: 'warning', message: '请输入新的银行账号' });
                    return false
                }
                state.token.OAccount = state.OAccount;
                UpdateUser();
            } else {
                state.dialogShow2 = false
            }
        }
        //修改银行名称
        const onBeforeCloseOBackName = (action, done) => {
            if (action === "confirm") {
                if (state.OBackName == '') {
                    Notify({ type: 'warning', message: '请输入新的银行名称' });
                    return false
                }
                state.token.OBackName = state.OBackName;
                UpdateUser();
            } else {
                state.dialogShow1 = false
            }
        }

        //修改银行支行名称
        const onBeforeCloseOpeningBranch = (action, done) => {
            if (action === "confirm") {
                if (state.OpeningBranch == '') {
                    Notify({ type: 'warning', message: '请输入新的银行名称' });
                    return false
                }
                state.token.OpeningBranch = state.OpeningBranch;
                UpdateUser();
            } else {
                state.dialogShow = false
            }
        }

        //修改用户信息
        const UpdateUser = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '修改中...',
            });
            // 调用action的登录方法
            store.dispatch("UpdateUser", state.token).then((res) => {
                state.dialogShow0 = false;
                state.dialogShow = false;
                state.dialogShow1 = false;
                state.dialogShow2 = false;
                state.dialogShow3 = false;
                state.dialogShow4 = false;
                state.dialogShow5 = false;
                state.CardID = '';
                state.Name = '';
                state.AliPayAccount1 = '';
                state.Password = '';
                state.Security = '';
                toast.clear();
                getUser()
            }).catch(() => {
                toast.clear()
            });
        }
        //修改用户信息 登录密码
        const UpdateUserPassword = () => {
            // 调用action的登录方法
            var params = {
                MemberId: state.token.ID,
                OldPwd: state.OldPassword,
                NewPwd: state.NewPassword,
            }
            UpdateLoginPwd(params).then((res) => {
                if (res.Code == 0) {
                    state.dialogShow3 = false;
                    state.OldPassword = '';
                    state.NewPassword = '';
                    const toast = Toast.loading({
                        duration: 0,
                        forbidClick: true,
                        message: '修改成功，退出登录中...',
                    });
                    setTimeout(() => {
                        // 调用action的登录方法
                        store.dispatch("FedLogOut", {}).then((res) => {
                            router.push({ path: "/", });
                            toast.clear()
                        }).catch(() => {
                            toast.clear()
                        });
                    }, 2000);
                } else {
                    state.OldPassword = '';
                    state.NewPassword = '';
                    Notify({
                        type: 'danger',
                        message: res.Message
                    });
                    toast.clear()
                }
            });
        }
        // 修改交易密码
        const UpdateSecurityPassword = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '修改中...',
            });
            // 调用action的登录方法
            var params = {
                MemberId: state.token.ID,
                OldPwd: state.OldPwd,
                NewPwd: state.NewPwd,
            }
            UpdateSecurityPwd(params).then((res) => {
                if (res.Code == 0) {
                    toast.clear()
                    state.dialogShow4 = false;
                    state.OldPwd = '';
                    state.NewPwd = '';
                    getUser()
                } else {
                    state.OldPwd = '';
                    state.NewPwd = '';
                    Notify({
                        type: 'danger',
                        message: res.Message
                    });
                    toast.clear()
                }
            });
        }

        // 退出登录
        const FedLogOut = () => {
            Dialog.confirm({
                title: '提示',
                message: '确定要退出登录吗？',
            }).then(() => {
                const toast = Toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '退出登录中...',
                });
                // 调用action的登录方法
                store.dispatch("FedLogOut", {}).then((res) => {
                    router.push({ path: "/", });
                    toast.clear()
                }).catch(() => {
                    toast.clear()
                });
            }).catch(() => { });
        }
        // 清除缓存
        const callAndroid = () => {
            Dialog.confirm({
                title: '提示',
                message: '确定要清除缓存吗？',
            }).then(() => {
                const toast = Toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '清除缓存中...',
                });
                // 调用action的登录方法
                store.dispatch("FedLogOut", {}).then((res) => {
                    try {
                        jsInterface.clearCache("清除缓存");
                    } catch (error) {
                        location.reload();
                    }
                    router.push({ path: "/", });
                    toast.clear()
                }).catch(() => {
                    toast.clear()
                });
            }).catch(() => { });
        }
        //获取用户信息 更新余额
        const getUser = () => {
            store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                state.token = res.Data
            }).catch(() => { });
        }
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),
            onClickLeft,
            FedLogOut,
            callAndroid,
            onBeforeCloseNickName,
            onBeforeCloseCardID,
            onBeforeCloseName,
            onBeforeCloseAliPayAccount1,
            onBeforeClosePassword,
            onBeforeCloseSecurity,

            onBeforeCloseOBackUserName,
            onBeforeCloseOAccount,
            onBeforeCloseOBackName,
            onBeforeCloseOpeningBranch,

        };
    },
};
</script>

<style scoped></style>